<template>
  <div>
      <my-menu></my-menu>
      <div class="container">
          <div class="left-container">
            <div class="banner">
              <el-carousel trigger="click" height="312px">
                <el-carousel-item v-for="item in imageList" :key="item.id">
                  <img :src="'https://api.yeshaojun.com'+item.img" alt="" @click="$router.push({name: 'courseDetail',params: {name: item._id}})">
                </el-carousel-item>
              </el-carousel>
            </div>
            <read-header :form="form"></read-header>
          </div>
          <div class="right-container">
            <my-type></my-type>
          </div>
      </div>
  </div>
</template>

<script>
import myMenu from '../components/menu'
import myType from '../components/type'
import readHeader from '../components/readList'

export default {
  data () {
    return {
      imageList: [],
      form: []
    }
  },
  components: {
    myMenu,
    myType,
    readHeader
  },
  methods: {
    getNews () {
      this.$store.dispatch('getNews', {
        data: '',
        cb: (res) => {
          if (res.data.stateCode === '200') {
            this.form = res.data.data
          }
        }
      })
    },
    getProject () {
      this.$store.dispatch('getProject', {
        data: '',
        cb: (res) => {
          if (res.data.stateCode === '200') {
            for (let i = 0; i < res.data.data.length; i++) {
              console.log('22222222')
              if (i <= 2) {
                this.imageList.push(res.data.data[i])
              }
            }
            // console.log('1111', this.imageList)
          }
        }
      })
    }

  },
  mounted () {
    this.getNews()
    this.getProject()
  }
}
</script>

<style lang="stylus" scoped>
  .container
    width:1200px
    margin: 0 auto
    padding-top:20px
    .left-container
      height: auto
      // background-color:#fff
      width: 100%
      max-width: 800px
      display: inline-block
      float: left
      .banner
        height:312px
        img
          width:100%
          height: 312px
    .right-container
      float: left
      width: 380px
      z-index: -1
      height: 100%
      padding-bottom: 100px
      padding-left: 20px
      overflow: hidden
</style>
